import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  state = {
    count: 100,
    name: "珠峰"
  }
  // constructor() {
  //   super();
  //   this.state = {
  //     count: 100,
  //     name: "珠峰"
  //   }
  // }

  add = () => {
    // console.log(this)
    // this.state.count++
    // this.setState({}) // 只能更新state中的数据 也就是说 react组件中的数据只能写在state中
    // console.log(this.state.count)
    // this.setState({
    //   // 把当前对象合并到 state中
    //   // setState在大部分情况下是一个异步操作
    //   // 合成事件，原生事件绑定中的函数中的setState是一个同步的
    //   // 异步思想等同于 vue的DOM更新
    //   count: this.state.count + 1
    // }, () => {
    //   // 当数据更新完成之后执行 、、 类似于vue的$nextTick
    //   console.log(this.state.count)
    // })
    /* 
      this.setState({
        count:110
      },()=>{1})
      this.setState({
        count:120
      },()=>{2})
      this.setState({
        count:130
      },()=>{3})
      this.setState({
        count:140
      },()=>{4})
    
    */
    this.setState({
      count: this.state.count += 10 //count:110   this.state.count=110
    }, () => {
      console.log('1', this.state.count)
    })
    this.setState({
      count: this.state.count += 10 // count:120  this.state.count=120
    }, () => {
      console.log('2', this.state.count)
    })
    this.setState({
      count: this.state.count += 10// count:130  this.state.count=130
    }, () => {
      console.log('3', this.state.count)
    })
    this.setState({
      count: this.state.count += 10 // count:140  this.state.count=140
    }, () => {
      console.log('4', this.state.count)
    })
    // this.setState({
    //   count: 666
    // })

    console.log('5', this.state.count) // 140


  }
  render() {
    let { count, name } = this.state;
    return <div className=''>
      <h2>{name}{count} </h2>
      <button onClick={this.add}>+</button>

    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))